<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>top250</title>
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css"/>
		<link rel="stylesheet" type="text/css" href="../css/base.css"/>
		<script src="../js/mui.min.js"></script>
		<script src="../js/vue.js"></script>
		<style type="text/css">
			.menu{
				width: 100%;
				padding: 0;
				margin: 0;
				background-color: white;
			}
			.menu::after{
				content: '';
				display: block;
				clear: both;
			}
			.menu li{
				float: left;
				width: 20%;
				height: 40px;
				line-height: 40px;
				text-align: center;
				list-style: none;
				position: relative;
			}
			.menu .active{
				color: #FF5053;
			}
			.menu .active::after{
				content: '';
				width: 100%;
				height: 2px;
				display: block;
				background-color: #FF5053;
				position: absolute;
				bottom: 0;
			}
			.db-movie-list{
				background: none;
			}
			.db-movie-list::before{
				content: '';
				display: none;
			}
			.db-movie-list li{
				width: 95%;
				margin: auto;
				margin-top: 50px;
				padding: 0;
				padding-right: 0 !important;
				overflow: unset !important;
				/* border: 1px solid red; */
			}
			.db-movie-list li .mui-navigate-right{
				box-shadow: 0 0 5px 0 #999;
				margin: 0;
				margin-right: 0 !important;
				padding: 20px;
			}
			.db-movie-list li .mui-navigate-right::after{
				content: '';
				display: none;
			}
			.db-movie-list li .main_img{
				max-width: 1.2rem;
				width: 1.2rem;
				height: auto;
			}
			.db-movie-list li .title{
				font-size: 16px;
				font-weight: normal;
			}
			.db-movie-list li p{
				color: #AAAAAA;
			}
			.db-movie-list li p span{
				color: #FF0000;
				display: inline;
				padding-left: 5rpx;
			}
			.db-movie-list li .topTitle{
				position: relative;
				color: #FF0000;
				text-align: center;
				width: 150px;
				margin: 10px auto;
			}
			.db-movie-list li .topTitle::before{
				content: '';
				display: block;
				width: 50px;
				height: 1px;
				background: #999;
				position: absolute;
				left: 0;
				top: 50%;
				margin-top: -2px;
			}
			.db-movie-list li .topTitle::after{
				content: '';
				display: block;
				width: 50px;
				height: 1px;
				background: #999;
				position: absolute;
				right: 0;
				top: 50%;
				margin-top: -2px;
			}
			.toTop{
				display: block;
				width: 60px;
				height: 30px;
				line-height: 30px;
				text-align: center;
				background-color: #2AC845;
				border: 1px solid #ccc;
				border-radius: 5px;
				color: #fff;
				position: fixed;
				bottom: 50px;
				right: 10px;
			}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">Top250排行榜</h1>
		</header>
		<div class="mui-content" id="app">
			<ul class="menu">
				<li data-index='0' class="active">1-50</li>
				<li data-index='50'>51-100</li>
				<li data-index='100'>101-150</li>
				<li data-index='150'>151-200</li>
				<li data-index='200'>201-250</li>
			</ul>
			<!-- 图文列表 -->
			<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
				<div class="mui-scroll">
					<ul class="mui-table-view mui-table-view-chevron db-movie-list">
						<!-- @tap="lookDetail(item.id)" -->						
						<li class="mui-table-view-cell mui-media" v-for="(item,index) in movies" :key="item.id" >
							<div class="topTitle">
								{{nowIndex + index +1}}
							</div>
							<a class="mui-navigate-right">
								<img class="mui-media-object mui-pull-left main_img" :src="item.images.large">
								<div class="mui-media-body">
									<h3 class="title">{{item.title}}</h3>
									<p class='mui-ellipsis'>{{item.genres}}<span>{{item.rating.average}}</span></p>
									<p class='mui-ellipsis'>导演：{{item.directorsName}}</p>
									<p class='mui-ellipsis'>主演：{{item.castsName}}</p>
								</div>
							</a>
						</li>
						
					</ul>
				</div>
				<!-- end mui-scroll -->
			</div>
		
			<a href="#app" class="toTop">去顶部</a>
		</div>
		<!-- end app -->
		<script type="text/javascript">
			
			mui.init();
			
			let APP = new Vue({
				el:	'#app',
				data:{
					movies:[],	//	获取的电影列表
					nowPage: 1,	//	当前列表的当前页
					nowIndex:0	//	当前所属列表最低索引 (0-50)、(51-100) ...
				},
			});
			
			// Add down load and top Refresh
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					down: {
						style:'circle',
						callback: pulldownRefresh
					},
					up: {
						auto:true,
						contentrefresh: '正在加载...',
						contentnomore: '没有更多了...',
						callback: pullupRefresh
					}
				}
			});
			
			function pulldownRefresh(){
				// 重置页码为1
				APP.nowPage = 1;
				
				// 更改数组，清空数组
				APP.movies = [];
				
				// 调用上拉加载函数
				pullupRefresh();
				
				//	刷新完成，结束刷新样式
				mui('#pullrefresh').pullRefresh().endPulldown();
				//	重置上拉加载
				mui('#pullrefresh').pullRefresh().refresh(true);
			}
			
			// up load
			function pullupRefresh(){
				//	load data
				getMovies((APP.nowPage-1)*10+APP.nowIndex,10);
				APP.nowPage++;	//	页数加一
				//	是否禁止上拉加载
				// mui('#pullrefresh').endPullupToRefresh(true|false);
				mui('#pullrefresh').pullRefresh().endPullupToRefresh(APP.nowPage>=6);
			}
			
			
			function getMovies(start,count){
				mui.getJSON('http://t.yushu.im/v2/movie/top250',{
					start:start,
					count:count
				},function(data){
					if(data.count != 0){
						
						//	对部分数据进行处理（格式化） aray to string
						let subjects = data.subjects;
						let casts = [];
						let directors = [];
						subjects.map((v)=>{
							//	剧情类型
							v.genres = v.genres.join('/');
							
							//	主演
							v.casts.forEach((val)=>{
								casts.push(val.name)
							});
							v.castsName = casts.join('/');
							
							//	导演
							v.directors.forEach((val)=>{
								directors.push(val.name);
							});
							v.directorsName = directors.join('/')
							return v;
						})
						
						APP.movies = APP.movies.concat(subjects);
						// console.log(APP.movies)
					}
					
				},function(){
					console.log('网络错误！！')
				})
			}
			
			//	add meuns click 
			var menus = document.querySelectorAll('.menu li');
			// console.log(JSON.stringify(menus[0].getAttribute('data-index')));
			for(var i=0;i<menus.length;i++){
				menus[i].addEventListener('tap',function(){
					menus.forEach((v)=>{
						v.classList.remove('active');
					})
					this.classList.add('active');
					let start = parseInt(this.getAttribute('data-index'));
					
					APP.nowIndex = start;
					pulldownRefresh();
				})
			}
					
		</script>
	</body>
</html>
